<template>
    <view class='my-card'>
        <view class="card-flex">
            <view class="card-tag">卖出</view>
                <text class="card-text" style="margin:0 10rpx;">订单编号:343943439953</text>
                <image style="width: 24rpx;height: 24rpx;" src="../static/img/back_icon.png" mode="scaleToFill" />
            <view class="card-stats" style="flex: 1;text-align: right;">已取消</view>
        </view>
        <view class="card-time">2015-09-09 12:22:22</view>
        <view class="divider"></view>
        <view class="card-flex" style="margin-top: 8rpx;">
            <text class="card-text">单价</text>
            <text class="card-highlight"> 200</text>
        </view>
        <view class="card-flex">
            <text class="card-text">数量</text>
            <text class="card-highlight"> 200</text>
        </view>
        <view class="card-flex">
            <text class="card-text">总价</text>
            <text class="card-highlight"> 200</text>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {

        };
    },
    mounted() {

    },
    methods: {

    },
}
</script>

<style scoped>
.my-card {
    width: 698rpx;
    margin: 20rpx auto;
    padding: 16rpx 22rpx 24rpx 24rpx;
    background: #FFFFFF;
    border-radius: 8rpx;
    box-sizing: border-box;
}

.card-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}

.card-tag {
    width: 76rpx;
    height: 38rpx;
    background: rgba(15, 25, 84, 0.1);
    border-radius: 4rpx;
    text-align: center;
    line-height: 38rpx;
    font-weight: 500;
    font-size: 24rpx;
    color: #0F1954;
}

.card-order {
    font-size: 26rpx;
    color: #333333;
    margin: 10rpx 0;
}

.card-stats {
    font-size: 24rpx;
    color: #37B982;
}

.card-time {
    margin: 9rpx 0 24rpx 0;
    font-size: 20rpx;
    color: #999999;
    line-height: 28rpx;
}

.card-text {
    font-size: 24rpx;
    color: #999999;
    line-height: 56rpx;
}

.card-highlight {
    font-weight: 500;
    color: #333333;
    line-height: 56rpx;
}

.divider {
    height: 2rpx;
    background: #DFDFDF;
    width: 100%;
}
</style>